<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Vue2.6 HTML页面</title>
    <!-- 引入Vue.js和Vue.js的生命周期插件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
      .spec {
        margin-bottom: 10px;
        border: 1px solid black;
        padding: 10px;
      }
      .spec-title {
        margin-bottom: 10px;
      }
      .attrList {
        display: flex;
        align-items: center;
      }
      .attr {
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 显示 "Hello, Vue!" -->
      <div>
        <div v-for="(spec,specIndex) in specList" :key="spec.id" class="spec">
          <div class="spec-title">规格名:<input v-model="spec.title" /></div>
          <div class="attrList">
            <div v-for="attr in spec.attrList" :key="attr.id" class="attr">
              规格值:<input v-model="attr.title" />
            </div>
            <button @click="handleAddAttr(specIndex)">添加规格值</button>
          </div>
        </div>
        <button @click="handleAddSpec">添加规格</button>
      </div>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <div>specList===</div>
      <div>{{specList}}</div>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <div>specAttrs===</div>
      <div>{{specAttrs}}</div>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <div>skuList===</div>
      <div>{{skuList}}</div>
    </div>

    <!-- Vue实例及其定义 -->
    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            specAttrs: [],
            specList: [
              {
                id: 151,
                title: "口味",
                attrList: [
                  {
                    id: 588,
                    title: "不辣",
                  },
                  {
                    id: 589,
                    title: "微微辣",
                  },
                  {
                    id: 590,
                    title: "小小辣",
                  },
                ],
              },
              {
                id: 173,
                title: "分量",
                attrList: [
                  {
                    id: 591,
                    title: "小份",
                  },
                  {
                    id: 592,
                    title: "中份",
                  },
                  {
                    id: 593,
                    title: "大份",
                  },
                ],
              },
            ],
          };
        },
        watch: {
          specList: {
            //参考笛卡尔积算法
            handler(val) {
              let specAttrs = val.reduce(
                (result, skuItem) => {
                  return result.flatMap((oneSku) => {
                    return skuItem.attrList.map((y) => [
                      ...oneSku,
                      {
                        attr_value: y.title,
                        attr_key: skuItem.title,
                        attr_id: y.id,
                      },
                    ]);
                  });
                },
                [[]]
              );
              this.specAttrs = specAttrs;
              console.log("===specAttrs", specAttrs);
              console.log("===skuList", JSON.stringify(this.skuList));
            },
            deep: true,
            immediate: true,
          },
        },
        computed: {
          skuList({ specAttrs }) {
            return specAttrs.map((attr) => this.filterSkuItem(attr));
          },
        },
        methods: {
          filterSkuItem(attr) {
            // let specAttrsObj = {};
            // attr.map((_a) => {
            //   specAttrsObj[_a.attr_key] = _a.attr_value;
            // });
            let obj = {
              skuId: Date.now(),
              price: 0,
              originPrice: 0,
              status: 1,
              imgUrl: "",
              stockNum: 9999,
              specAttrs: attr.map((a) => a.attr_id),
              //   specAttrsArr: attr,
              //   specAttrsObj,
            };
            return obj;
          },
          handleAddAttr(index) {
            this.specList[index].attrList.push({
              id: Date.now(),
              title: `规格值${this.specList[index].attrList.length + 1}`,
            });
          },
          handleAddSpec() {
            this.specList.push({
              id: Date.now(),
              title: `规格名${this.specList.length + 1}`,
              attrList: [],
            });
            const lastIndex = this.specList.length - 1;
            this.specList[lastIndex].attrList.push({
              id: Date.now(),
              title: `规格值${this.specList[lastIndex].attrList.length + 1}`,
            });
          },
        },
      });
    </script>
  </body>
</html>
